<template>
  <div class="forget_wrapper">
    <forget-header :headTitle="headTitle"></forget-header>
    <form class="loginForm">
      <section class="input_container">
        <input type="text" placeholder="手机号/邮箱/用户名" v-model.lazy="userAccount">
      </section>
      <section class="input_container">
        <input v-if="!showOldPassword" type="password" placeholder="请输入旧密码" v-model="oldPassWord">
        <input v-else type="text" placeholder="请输入旧密码" v-model="oldPassWord">
        <div class="button_switch" :class="{change_to_text: showOldPassword}" @click="changePassWordType('old')">
          <div class="circle_button" :class="{trans_to_right: showOldPassword}"></div>
          <span>abc</span>
          <span>...</span>
        </div>
      </section>
      <section class="input_container">
        <input v-if="!showNewPassword" type="password" placeholder="请输入新密码" v-model="newPassWord">
        <input v-else type="text" placeholder="请输入新密码" v-model="newPassWord">
        <div class="button_switch" :class="{change_to_text: showNewPassword}" @click="changePassWordType('new')">
          <div class="circle_button" :class="{trans_to_right: showNewPassword}"></div>
          <span>abc</span>
          <span>...</span>
        </div>
      </section>
      <section class="input_container">
        <input v-if="!showConfirmPassword" type="password" placeholder="请确认新密码" v-model="confirmPassWord">
        <input v-else type="text" placeholder="请确认新密码" v-model="confirmPassWord">
        <div class="button_switch" :class="{change_to_text: showConfirmPassword}" @click="changePassWordType('confirm')">
          <div class="circle_button" :class="{trans_to_right: showConfirmPassword}"></div>
          <span>abc</span>
          <span>...</span>
        </div>
      </section>
      <section class="input_container captcha_code_container">
        <input type="text" placeholder="验证码" maxlength="4" v-model="codeNumber">
        <div class="img_change_img">
          <img v-show="captchaCodeImg" :src="captchaCodeImg" @click="getCaptchaCode">
          <div class="change_img" @click="getCaptchaCode">
            <p>看不清</p>
            <p>换一张</p>
          </div>
        </div>
      </section>
    </form>
    <div class="login_container" @click="resetPassword">确认修改</div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import ForgetHeader from '@/components/header/Header'
export default {
  name: 'Forget',
  components: {
    ForgetHeader
  },
  data () {
    return {
      headTitle: '找回密码',
      showOldPassword: false, // 是否显示新密码
      showNewPassword: false, // 是否显示旧密码
      showConfirmPassword: false, // 是否显示确认密码
      phoneNumber: null, // 电话号码
      userInfo: null, // 获取到的用户信息
      userAccount: null, // 用户名
      oldPassWord: null, // 旧密码
      newPassWord: null, // 新密码
      confirmPassWord: null, // 确认密码
      captchaCodeImg: null, // 验证码地址
      codeNumber: null, // 验证码
      alertText: null // 提示的内容
    }
  },
  created () {
    this.getCaptchaCode()
  },
  methods: {
    // 是否显示密码
    changePassWordType (type) {
      // if (type === 'old') {
      //   this.showOldPassword = !this.showOldPassword
      // } else if (type === 'new') {
      //   this.showNewPassword = !this.showNewPassword
      // } else {
      //   this.showConfirmPassword = !this.showConfirmPassword
      // }
      switch (type) {
        case 'old':
          this.showOldPassword = !this.showOldPassword
          break
        case 'new':
          this.showNewPassword = !this.showNewPassword
          break
        case 'confirm':
          this.showConfirmPassword = !this.showConfirmPassword
          break
      }
    },
    // 判断输入的电话号码
    inputPhone () {
      if (/.+/gi.test(this.phoneNumber)) {
        this.rightPhoneNumber = true
      } else {
        this.rightPhoneNumber = false
      }
    },
    // 获取验证码，线上环境使用固定的图片，生产环境使用真实的验证码
    getCaptchaCode () {
      this.$api.home.getcaptchas().then(res => {
        this.captchaCodeImg = res.data.code
      })
    },
    // 重置密码
    resetPassword () {
      if (!this.userAccount) {
        Dialog.alert({
          width: '70%',
          message: '请输入手机号/邮箱/用户名'
        })
        return
      } else if (!this.oldPassWord) {
        Dialog.alert({
          width: '70%',
          message: '请输入旧密码'
        })
        return
      } else if (!this.newPassWord) {
        Dialog.alert({
          width: '70%',
          message: '请输入新密码'
        })
        return
      } else if (!this.confirmPassWord) {
        Dialog.alert({
          width: '70%',
          message: '请再次输入新密码'
        })
        return
      } else if (this.newPassWord !== this.confirmPassWord) {
        Dialog.alert({
          width: '70%',
          message: '两次输入的密码不一致'
        })
        return
      } else if (!this.codeNumber) {
        Dialog.alert({
          width: '70%',
          message: '请输验证码'
        })
        return
      }
      // 发送重置信息
      this.$api.home.changePassword(this.userAccount, this.oldPassWord, this.newPassWord, this.confirmPassWord, this.codeNumber).then(res => {
        if (res.data.message) {
          Dialog.alert({
            width: '70%',
            message: res.data.message
          })
          this.getCaptchaCode()
          return  // eslint-disable-line
        } else {
          Dialog.alert({
            width: '70%',
            message: '密码修改成功'
          })
          this.$router.go(-1)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
    .forget_wrapper
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      background-color: #f2f2f2
      z-index: 101
      padding-top: .88rem
      .loginForm
        padding: .2rem 0 0
        background-color: #fff
        .input_container
          display: flex
          justify-content: space-between
          padding: .3rem .4rem
          border-bottom: 1px solid #f1f1f1
          input
            sc(.30rem, #666)
      .captcha_code_container
        .img_change_img
          display: flex
          align-items: center
          img
            wh(1.2rem, 0.5rem)
            margin-right: .1rem
          .change_img
            display: flex
            flex-direction: 'column'
            flex-wrap: wrap
            width: 1rem
            justify-content: center
            p
              sc(.24rem, #666)
            p:nth-of-type(2)
              color: $blueTextColor
      .login_container
        margin: .5rem .3rem .3rem
        sc(.35rem, #fff)
        background-color: #4cd96f
        padding: .20rem 0
        border: 1px
        border-radius: 0.05rem
        text-align: center
      .button_switch
        background-color: #ccc
        display: flex
        justify-content: center
        wh(.6rem, .4rem)
        padding: 0 .12rem
        border-radius: 0.5rem
        position: relative
        .circle_button
          transition: all .3s
          position: absolute
          top: -.06rem
          left: 0
          z-index: 1
          wh(.5rem, .5rem)
          box-shadow: 0 .01rem 0.053333rem 0 rgba(0,0,0,.1)
          background-color: #f1f1f1
          border-radius: 50%
        .trans_to_right
          transform: translateX(.4rem)
        span
          sc(.24rem, #fff)
          transform: translateY(.025rem)
          line-height: .35rem
        span:nth-of-type(2)
          transform: translateY(-.04rem)
      .change_to_text
        background-color: #4cd964
      .change_login
        float: left
        sc(.3rem, #666)
      .to_forget
        float: right
        sc(.3rem, #3b95e9)
</style>
